Skip to content

Comments

feat(room): implement room layout with organizer/guest role switching via cookies#70

Merged
underscorekadji merged 6 commits intomainfrom
copilot/fix-14
Aug 7, 2025
Merged

feat(room): implement room layout with organizer/guest role switching via cookies#70
underscorekadji merged 6 commits intomainfrom
copilot/fix-14

Conversation

Copy link
Contributor

Copilot AI commented Aug 5, 2025 •
edited
Loading

This PR implements a complete room layout component system that provides role-based UI switching between Organizer and Guest views using cookie-based role detection, as specified in the requirements.

Key Features Implemented

Role Detection & Switching

  • Cookie-based persistence: First visitor to a room becomes the organizer, subsequent visitors are guests
  • Automatic role assignment: No manual role selection needed - seamless experience
  • Role-specific UI: Organizer gets full controls, guests get read-only view with helpful messaging

Responsive Layout Design

  • Desktop Layout: 3-column grid (1:2:1 ratio) - Participants List | Wheel Section | Timer Panel
  • Mobile Layout: Single-column stack - Title → Timer → Wheel → Participants → Instructions
  • Responsive breakpoints: Uses Tailwind's lg: classes for proper desktop/mobile switching

Component Architecture

  1. RoomTitle: Shows room name, ID, role badge, and copy URL button (organizer only)
  2. ParticipantsList: Add/disable participants, status management, role indicators
  3. Wheel: Animated spinning wheel with framer-motion, time picker modal, random selection
  4. TimerPanel: Countdown timer with color coding (green → yellow → red), control buttons
  5. Instructions: Collapsible, role-specific instructions and pro tips
  6. RoomLayout: Main orchestrator component handling state and coordination

Wheel Functionality

  • Smooth animation: 3-second spin with realistic deceleration using framer-motion
  • Time picker modal: Set presentation duration (1-60 minutes, default 10)
  • Random selection: Fair selection from eligible participants (queued status)
  • Visual feedback: "Spinning..." overlay, disabled controls during animation

Timer & Session Management

  • Real-time countdown: MM:SS format with second-level precision
  • Color-coded warnings: Green (normal), Yellow (last 2 min), Red (last 30 sec)
  • Organizer controls: Mark as finished, stop timer early
  • Status transitions: Queued → Active → Finished lifecycle

UI/UX Polish

  • Loading states: Spinners and disabled states during operations
  • Error handling: User-friendly error messages with dismiss functionality
  • Accessibility: Semantic HTML, ARIA labels, keyboard navigation
  • Dark mode support: Full Tailwind dark mode compatibility

Technical Implementation

  • Pure Tailwind CSS: No additional UI libraries, following design system
  • TypeScript: Full type safety with existing domain entities integration
  • Framer Motion: Smooth wheel animations and micro-interactions
  • Domain Integration: Uses existing Participant and Room entities with proper business logic
  • Socket.IO Ready: Architecture prepared for real-time integration (currently using mock data)

Screenshots

Home Page:
Home Page

Guest View (Read-only):
Guest View

Organizer View (Full Controls):
Organizer View

Active Presentation State:
Active Presentation

Quality Assurance

  • ✅ All existing tests pass (193/193)
  • ✅ ESLint clean, Prettier formatted
  • ✅ TypeScript strict mode compliance
  • ✅ Responsive design tested on mobile and desktop
  • ✅ Production build optimized and verified

The implementation provides a solid foundation for the MVP while maintaining clean architecture and excellent user experience across both organizer and guest roles.

Fixes #14.

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

@underscorekadji
feat(room): implement complete room layout with role-based UI and whe…
131cdd7 
…el functionality

- Add role detection service with cookie-based persistence
- Implement responsive 3-column layout (desktop) and single-column stack (mobile)
- Create ParticipantsList component with add/disable/finish controls for organizer
- Build animated Wheel component with framer-motion spin animation
- Add TimerPanel with countdown, color coding, and control buttons
- Include RoomTitle with copy URL button for organizer
- Implement collapsible Instructions component with role-specific content
- Add RoomLayout orchestrator with mock data integration
- Support organizer vs guest role switching via cookies
- All components styled with Tailwind CSS following design requirements

Co-authored-by: underscorekadji <3449713+underscorekadji@users.noreply.github.com>
Copilot AI changed the title [WIP] [2.2] Room Layout (Organizer / Guest switch via cookie) feat(room): implement room layout with organizer/guest role switching via cookies Aug 5, 2025
Copilot AI requested a review from underscorekadji August 5, 2025 20:57
@underscorekadji underscorekadji requested a review from Copilot August 5, 2025 21:38
Copilot AI reviewed Aug 5, 2025
View reviewed changes
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements a comprehensive room layout system with role-based UI switching between organizer and guest views using cookie-based role detection. The implementation provides a complete room experience with participants management, spinning wheel functionality, timer controls, and responsive design.

  • Cookie-based role detection where first visitor becomes organizer, subsequent users are guests
  • Complete responsive layout with desktop 3-column grid and mobile single-column stack
  • Interactive spinning wheel with time picker modal and smooth animations using framer-motion

Reviewed Changes

Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
src/app/room/utils/role-detection.ts Cookie-based role detection service for organizer/guest assignment
src/app/room/components/Wheel.tsx Animated spinning wheel component with participant selection
src/app/room/components/TimerPanel.tsx Real-time countdown timer with color-coded warnings
src/app/room/components/RoomTitle.tsx Room header with role display and URL sharing functionality
src/app/room/components/RoomLayout.tsx Main layout orchestrator handling state and responsive grid
src/app/room/components/ParticipantsList.tsx Participant management with add/enable/disable controls
src/app/room/components/Instructions.tsx Collapsible role-specific instructions panel
src/app/room/[id]/page.tsx Room page implementation using the layout component
package.json Added framer-motion dependency for animations
Comments suppressed due to low confidence (1)

src/app/room/utils/role-detection.ts:48

  • The role detection logic is inverted. On first visit, isOrganizer() returns false because no cookie exists, but then setAsOrganizer() is called. This means the first visitor will always be treated as a guest initially, which contradicts the intended behavior of making the first visitor the organizer.
   */

@underscorekadji underscorekadji marked this pull request as ready for review August 7, 2025 09:24
@underscorekadji underscorekadji merged commit e1a5fa2 into main Aug 7, 2025
3 checks passed
@underscorekadji underscorekadji deleted the copilot/fix-14 branch August 7, 2025 09:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@underscorekadji underscorekadji Awaiting requested review from underscorekadji

Assignees

@underscorekadji underscorekadji

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[2.2] Room Layout (Organizer / Guest switch via cookie)

2 participants

@underscorekadji